<script lang="ts" setup>
import '@wangeditor/editor/dist/css/style.css'; // 引入编辑器的 CSS 文件
import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue';
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
import { UploadFilled } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import { useRoute } from 'vue-router';
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef();
// 使用 useRoute 获取当前路由对象
const route = useRoute();
    // 获取路由参数 id
const articleId = ref(route.params.id);

import { getArticleById } from '@/api/article';

async function getArticleFun(){
    if(articleId.value=='new'){
        console.log('文章ID为空')
        return
    }
    const result=await getArticleById(articleId.value)
    if(result.code===1){
        article.value=result.data
        console.log(result.data)
    }
    else{
        ElMessage.error(result.msg)
    }
}

const article=ref({
    title:'',
    imagePath:'',
    content:''
})

// 内容 HTML
const valueHtml = ref('');

// 模拟 AJAX 异步获取内容
onMounted(() => {
    getArticleFun()
});

import { IEditorConfig } from '@wangeditor/editor'
import { IToolbarConfig } from '@wangeditor/editor'

const toolbarConfig: Partial<IToolbarConfig> = {  // TS 语法
// const toolbarConfig = {                        // JS 语法
    /* 工具栏配置 */
}

// 初始化 MENU_CONF 属性
const editorConfig: Partial<IEditorConfig> = {
  // TS 语法
  placeholder: '请输入内容...',
  // const editorConfig = {                       // JS 语法
  MENU_CONF: {
  },

  // 其他属性...
}

// 修改 uploadImage 菜单配置
editorConfig.MENU_CONF['uploadImage'] = {
  server: 'http://localhost:8080/file/articleimage',
  fieldName: 'file',
  // 继续写其他配置...

  //【注意】不需要修改的不用写，wangEditor 会去 merge 当前其他配置
}

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor) {
    editor.destroy();
  }
});

const handleCreated = (editor: any) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
  

//   console.log(editor.getAllMenuKeys());
  console.log(editor.getMenuConfig('uploadImage'));
  
 
};

const handleSuccess = (response, uploadFile) => {
  article.value.imagePath = response.data;
  ElMessage.success(`图片上传成功`);
};

// 处理上传失败的事件
const handleError = (error, uploadFile) => {
  console.error('上传失败:', error);
  ElMessage.error(`上传失败`);
};

import { addArticle,addArticleByDraft } from '@/api/article';

async function addArticleFun(){
    const result=await addArticle(article.value)
    if(result.code===1){
        ElMessage.success('发布成功')
        addArticleByDraft(article.value)
    }
    if(result.code===0){
        ElMessage.error(result.msg)
    }
}

async function addArticleByDraftFun(){
    const result=await addArticleByDraft(article.value)
    if(result.code===1){
        ElMessage.success('保存成功')
    }
    if(result.code===0){
        ElMessage.error(result.msg)
    }
}

import { updateArticle } from '@/api/article';

async function updateArticleFun(){
    const result=await updateArticle(article.value)
    if(result.code===1){
        ElMessage.success('修改成功')
    }
    if(result.code===0){
        ElMessage.error(result.msg)
    }
}

</script>

<template>
  <div style="background: #f1f1f1;min-height: 100vh;">
    <div class="main-header">
        博客创作
    </div>
    <div class="toolbar-wrapper">
        <Toolbar
        style="background-color: #fff;"
        class="toolbar"
        :editor="editorRef"
        :default-config="toolbarConfig"
        mode="default"
        />
    </div>
    <div style="height: 10vh;"></div>
    <div class="editor-wrapper">
        <div class="editor-header">
            <div class="editor-header-text">
                <div>标题：<input class="editor-header-text-input" type="text" placeholder="请输入文章标题（5~100个字）" v-model="article.title"></div>
            </div>
        </div>
        <div class="editor-body">
            <Editor
            class="editor"
            v-model="article.content"
            :default-config="editorConfig" 
            mode="default"
            @on-created="handleCreated"
            />
        </div>
    </div>
    <div class="page-main-editor-bottom">
        <div class="page-main-editor-bottom-item">
            <div class="editor-header-text-title">添加封面:</div>
            <div class="editor-header-text-content">
                <el-upload
                    class="upload-demo"
                    drag
                    action="http://localhost:8080/file/image"
                    multiple
                    :on-success="handleSuccess"
                    :on-error="handleError"
                    :show-file-list="false"
                >
                    <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                    <div class="el-upload__text">
                    拖拽文件或 <em>点击上传</em>
                    </div>
                    <template #tip>
                    <div class="el-upload__tip">
                        上传照片类型：jpg/png
                    </div>
                    </template>
                </el-upload>
            </div>
            <div class="editor-header-text-content-img">
                <img style="width: 100%; border-radius: 6px;" :src="'/public/image/'+article.imagePath" alt="">
            </div>
        </div>
    </div>
    <div style="height: 4vh;"></div>
    <div class="page-main-bottom">
        <div class="main-page-left-top-button">
            <el-button  v-if="article.status==2" style="width: 100%;height: 100%;">定时发布</el-button>
        </div>
        <div class="main-page-left-top-button">
            <el-button v-if="articleId=='new'" type="success" style="width: 100%;height: 100%;" >保存为草稿</el-button>
            <el-button v-if="article.status==2" type="success" style="width: 100%;height: 100%;" >发布博客</el-button>
            <el-button v-if="article.status==1" type="success" style="width: 100%;height: 100%;" @click="addArticleByDraftFun">保存为草稿</el-button>
        </div>
        <div class="main-page-left-top-button">
            <el-button v-if="articleId=='new'" type="primary" style="width: 100%;height: 100%;" @click="addArticleFun">发布博客</el-button>
            <el-button v-else type="primary" style="width: 100%;height: 100%;" @click="updateArticleFun">保存修改</el-button>
        </div>
    </div>
  </div>
</template>

<style scoped>
.main-header {
  height: 4vh;
  line-height: 4vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 2vh;
  font-weight: 600;
  background-color: #fff;
  width: 100%;
  position: fixed;
  z-index: 444;
  top: 0px;
  padding:0px 1vw;
}

.toolbar-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: center;
  height: 5vh;
  line-height: 5vh;
  background-color: #fff;
  position: fixed;
  z-index: 444;
  top: 4vh;
  width: 100%;
  border-bottom: 1px solid rgb(232, 232, 232);
}

.toolbar {
  background-color: rgb(232, 232, 232); /* 设置 Toolbar 的背景色 */
  height: 100%;
}

.editor-wrapper {
    width: 70vw;
    margin: 2vh 15vw;
    min-height: 70vh;
}
.editor-header{
    background-color: #fff;
    height: 6.1vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 10px 10px 0px 0px;
    
}
.editor {
  height: 100%;
}
.editor-header-text{
    height: 6vh;
    line-height: 6vh;
    margin: 0vh 1vw;
    font-size: 2vh;
    font-weight: 600;
    border-bottom: 2px solid rgb(232, 232, 232);
}
.editor-body{
    background-color: #fff;
    padding:0vh 1vh;
    min-height: 60vh;
    border-radius: 0px 0px 10px 10px;
}
.editor-header-text-input {
    width: 50vw; /* 宽度为视口宽度的 50% */
    height: 4vh; /* 高度为视口高度的 4% */
    font-size: 2vh; /* 字体大小为视口高度的 2% */
    font-weight: 600; /* 字体加粗 */
    border: none; /* 去除边框 */
    outline: none; /* 去除焦点时的轮廓 */
    box-shadow: none; /* 去除可能的阴影 */
    -webkit-appearance: none; /* 去除 Webkit 浏览器的默认样式 */
    -moz-appearance: none; /* 去除 Firefox 的默认样式 */
    appearance: none; /* 去除其他浏览器的默认样式 */
}
.editor-header-text-input:focus {
    border: none; /* 确保在焦点状态下也没有边框 */
    outline: none; /* 确保在焦点状态下也没有轮廓 */
    box-shadow: none; /* 确保在焦点状态下也没有阴影 */
}
.page-main-bottom{
    position: fixed;
    width: 100vw;
    background: #fff;
    height: 8vh;
    bottom: 0px;
    left: 0px;
    z-index: 444;
    display: flex;
    flex-direction: row;
}
.main-page-left-top-button{
    margin: 2vh 1vw;
    width: 8vw;
    line-height: 4vh;
}
.main-page-left-top-button:nth-child(1){
    margin-left: 55vw;
}
.page-main-editor-bottom{
    width: 68vw;
    min-height: 4vh;
    background-color: #fff;
    margin: 0px 15vw;
    margin-bottom: 10vh;
    border-radius: 10px;
    padding: 1vh 1vw;
}
.page-main-editor-bottom-item{
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 12vw;
}
.editor-header-text-title{
    width: 5vw;
}
.editor-header-text-content{
    width: 16vw;
    height: 9vw;
}
.editor-header-text-content-img{
    width: 16vw;
    height: 9vw;
    margin: 0.5vh 1vw;
    border-radius: 6px;
    border: 1px dashed rgb(232, 232, 232);
}
</style>